<template>
  <el-card>
    <div class="stat-card">
      <el-row type="flex" justify="space-between">
        <div class="card-header">
          <span class="title-line" />
          <span class="title">趋势图</span>
        </div>
        <div class="timespan">
          <!--<el-button :type="time === 'today' ? 'primary' : ''" @click="handlerChangeTime('today')">今日</el-button>-->
          <!--<el-button :type="time === 'week' ? 'primary' : ''" @click="handlerChangeTime('week')">本周</el-button>-->
          <!--<el-button :type="time === 'month' ? 'primary' : ''" @click="handlerChangeTime('month')">本月</el-button>-->
          <!--<el-button :type="time === 'quarter' ? 'primary' : ''" @click="handlerChangeTime('quarter')">本季度-->
          <!--</el-button>-->
          <!--<date-time-range :value="timespan" class="timespan-input" />-->
          <edu-date :value.sync="daterange" :options="dateOptions" :args="dateArgs" />
        </div>
      </el-row>
      <div
        v-loading="loading"
        :element-loading-text="loadingText"
        :element-loading-spinner="loadingSpinner"
        class="card-body"
      >
        <ve-line
          ref="echarts"
          height="362px"
          :data="chartData"
          :settings="settings"
          :colors="colors"
          :extend="extendsConfig"
        />
      </div>
    </div>
  </el-card>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
import EduDate from '@public/form/date.vue';
import { shortcutsLayterThreeMonth } from '@/common/js/const.js';

export default {
  name: 'SingleTicketTrend',
  components: {
    VeLine,
    EduDate
  },
  props: {
    ticketId: {
      type: [String, Number],
      default: 0
    },
    couponId: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      loading: true,
      loadingText: '',
      loadingSpinner: '-',
      dateArgs: {
        date_type: 'daterange',
        format: 'yyyy-MM-dd'
      },
      daterange: null,
      settings: {
        labelMap: {
          date: '日期',
          receive_count: '领取次数',
          used_count: '使用次数',
          receive_used_count: '领取并使用次数',
          expire_count: '过期数量'
        },
        // xAxisType: 'time',
        // yAxisType: ['KMB'],
        yAxisName: ['数量']
        // scale: [true, false]
      },
      chartData: {
        columns: ['date', 'receive_count', 'used_count', 'receive_used_count', 'expire_count'],
        rows: []
      },
      colors: ['#5193FF', '#FF9E61', '#5C887A', '#E436F1'],
      extendsConfig: {
        grid: {
          right: 20,
          left: 20
        },
        xAxis(v) {
          v.forEach(i => {
            i.boundaryGap = false;
            i.axisLabel = {
              showMaxLabel: true,
              rotate: 65
            };
          });

          return v;
        },
        yAxis(v) {
          v.forEach(i => {
            i.minInterval = 1;
          });

          return v;
        }
      },
      dateOptions: {
        disabledDate: function(time) {
          // 计算两年前的今天时间
          const date = new Date();
          date.setFullYear(date.getFullYear() - 2);
          date.setDate(date.getDate() - 1);

          return time.getTime() > Date.now() || time.getTime() < date.getTime();
        },
        shortcuts: shortcutsLayterThreeMonth
      }
    }
  },
  watch: {
    daterange() {
      this.loadStatData()
    },
    ticketId() {
      this.loadStatData()
    },
    couponId() {
      this.loadStatData()
    }
  },
  created() {
    this.loadStatData()
  },
  methods: {
    loadStatData() {
      this.loading = true
      if (!this.ticketId) {
        this.loadingText = '数据出错'
        return;
      }

      this.loadingSpinner = 'el-icon-loading'
      this.loadingText = '数据加载中'
      const params = {
        ticket_id: this.ticketId,
        coupon_id: this.couponId,
        daterange: this.daterange
      }
      this.$http.get(
          '/admin/data/ticket/receive/trend',
          params,
          ({ data }) => {
            this.chartData.rows = data.rows
            this.loading = false
          },
          ({ msg }) => {
            this.loadingText = msg
          },
          false
      )
    },
    handlerChangeTime(time) {
      this.time = time
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';

.stat-card {
  @include card-header;

  .card-body {
    margin-top: 26px;
  }
}
</style>
